<template>
  <el-dialog v-el-drag-dialog title="发送测试短信" :visible.sync="visible" :append-to-body="appendToBody" :before-close="onClose">
    <el-form ref="templateForm" :model="form" :rules="rules" label-width="120px" :disabled="!hasLoaded">
      <el-card>
        <el-form-item label="接收手机号" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="模板内容" prop="content">
          <el-input type="textarea" v-model="form.content" />
        </el-form-item>
        <el-form-item v-for="param in form.params" :key="param" :label="'参数 {' + param + '}'" :prop="'templateParams.' + param">
          <el-input v-model="form.templateParams[param]" :placeholder="'请输入 ' + param + ' 参数'" />
        </el-form-item>
      </el-card>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button v-if="hasLoaded" type="primary" icon="el-icon-check" @click="onSubmit">确 定</el-button>
      <el-button icon="el-icon-close" @click="onClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { smsTemplateLoad, smsSend } from '@/api/tool/sms'

export default {
  name: 'SmsTemplateFormDialog',
  data() {
    return {
      visible: false,
      appendToBody: false,
      hasLoaded: false,
      form: {
        id: undefined,
        channelCode: undefined,
        templateId: undefined,
        templateCode: undefined,
        templateName: undefined,
        content: undefined,
        mobile: undefined,
        params: undefined,
        templateParams: {}
      },
      rules: {
        mobile: [{ required: true, message: '手机号不能为空' }],
        content: [{ required: true, message: '模板内容不能为空' }],
        templateParams: {}
      },
      sendForm: undefined
    }
  },
  methods: {
    init(id) {
      this.hasLoaded = false
      this.form.id = id || null
      this.visible = true
      this.$nextTick(() => {
        this.loadForm(id)
      })
    },
    loadForm(id) {
      if (id) {
        smsTemplateLoad({ 'id': id }).then(response => {
          this.form = this.$api.objectUpdate(this.form, response.param)
          if (this.form.params) {
            this.form.params = JSON.parse(this.form.params)
            this.form.templateParams = this.form.params.reduce(function(obj, item) {
              obj[item] = undefined
              return obj
            }, {})
            this.rules.templateParams = this.form.params.reduce(function(obj, item) {
              obj[item] = { required: true, message: '参数 ' + item + ' 不能为空' }
              return obj
            }, {})
          }
        }).catch(() => {})
      }

      // 判断当前用户权限
      this.hasLoaded = this.$perm.hasPermissionOr(['sms:template:edit'])
    },
    onSubmit() {
      this.$refs.templateForm.validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form))
          data.params = JSON.stringify(this.form.templateParams)
          smsSend(data).then(response => {
            this.$modal.msgSuccess(response.msg)
            this.onClose()
          }).catch(() => {})
        }
      })
    },
    onClose() {
      this.$refs.templateForm.resetFields()
      this.sendForm = undefined
      this.visible = false
    }
  }
}
</script>
